<template>
	<view class="m-t-20">
		<view class="coupon-item" :class="{'gray':btnType==2}"
			@click="goUrl((btnType==0&&(item.status_text_value==5||item.status_text_value==6))?'/bundle/pages/get_coupon_guide/get_coupon_guide?id='+item.id:'/bundle/pages/get_coupon_detail/get_coupon_detail?id='+item.ccl_id)"
			v-for="(item,index) in list" :key="index">
			<view class="price col-center">
				<view style="text-align: center;">
					<template v-if="btnType==2">
						<image v-if="item.type==0" src="../../bundle/static/icon_coupon_book_gray.png" style="width: 27rpx;height: 20rpx;margin-right: 6rpx;vertical-align: -4rpx;"></image>
						<image v-else-if="item.type==1" src="../../bundle/static/icon_coupon_gift_gray.png" style="width: 22rpx;height: 22rpx;margin-right: 6rpx;vertical-align: -5rpx;"></image>
						<image v-else src="../../bundle/static/icon_coupon_coffee_gray.png" style="width: 24rpx;height: 21rpx;margin-right: 6rpx;vertical-align: -4rpx;"></image>
					</template>
					<template v-else>
						<image v-if="item.type==0" src="../../bundle/static/icon_coupon_book.png" style="width: 27rpx;height: 20rpx;margin-right: 6rpx;vertical-align: -4rpx;"></image>
						<image v-else-if="item.type==1" src="../../bundle/static/icon_coupon_gift.png" style="width: 22rpx;height: 22rpx;margin-right: 6rpx;vertical-align: -5rpx;"></image>
						<image v-else src="../../bundle/static/icon_coupon_coffee.png" style="width: 24rpx;height: 21rpx;margin-right: 6rpx;vertical-align: -4rpx;"></image>
					</template>
					<text style="font-size: 21rpx;"
						:style="btnType==2 ? 'color:#9e9e9e;' : 'color:#b29984;'">{{item.type==0?"图书":item.type==1?"文创":"咖啡"}}</text>
				</view>
				<view style="text-align: center;" :style="btnType==2 ? 'color:#9e9e9e;' : 'color:#f14023;'">
					<text style="font-size: 49rpx;">{{item.money}}</text>
					<text style="font-size: 22rpx;">元</text>
				</view>
				<view style="font-size: 21rpx;text-align: center;"
					:style="btnType==2 ? 'color:#9e9e9e;' : 'color:#b29984;'">{{item.use_min>0?"满"+item.use_min+"元可用":"无门槛"}}</view>
			</view>
			<view class="info m-l-30">
				<view style="margin-top: 25rpx;font-size: 29rpx;"
					:style="btnType==2 ? 'color:#9e9e9e;' : 'color:#303030;'">{{item.name_buy}}</view>
				<view class="muted" style="margin-top: 8rpx;font-size: 21rpx;">有效期:
					{{item.use_time_start}}至{{item.use_time_end}}
				</view>
				<view style="margin-top: 20rpx;font-size: 21rpx;"
					:style="btnType==2 ? 'color:#9e9e9e;' : 'color:#b29984;'">部分商品可用</view>
			</view>
			<image v-if="btnType==2" class="expired"
				:src="item.use_status==1?'../../bundle/static/icon_coupon_used.png':'../../bundle/static/icon_coupon_expired.png'">
			</image>
			<button v-else type="primary" class="btn white"
				:class="{'plain':item.status_text_value!=6&&item.status_text_value!=7}"
				@tap.stop="onHandle(item)">{{item.status_text}}</button>
		</view>
	</view>
</template>

<script>
	import {
		getCoupon
	} from "@/api/activity";
	import {
		grabCoupon,
		checkGrabStatus
	} from "@/api/activity";
	export default {
		data() {
			return {
				showTips: [],
				checkStatusCount: 0,
				checkStatusTimer: null
			};
		},
		props: {
			list: {
				type: Array,
				default: () => [],
			},
			btnType: {
				// 0 去使用  1已使用 2已过期 3领取
				type: Number,
			},
			ifAct: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			list: {
				handler: function(val) {
					let arr = val.map((item) => {
						return 0;
					});
					this.showTips = arr;
				},
				immediate: true,
				deep: true,
			},
		},
		computed: {

		},
		methods: {
			async onHandle(item) {
				if (item.status_text_value == 2 || item.status_text_value == 5 || item.status_text_value == 6) {
					if (this.ifAct) {
						this.ifAct = false;
						let res = await grabCoupon(item.id);
						if (res.code == 1) {
							this.checkStatusCount = 0
							this.checkGrabStatusFun(res.data.job_id)
						} else {
							this.ifAct = true;
							this.$toast({
								title: res.msg
							});
							if (res.data.status == "need_mobile") {
								setTimeout(() => {
									this.$Router.push({
										path: "/bundle/pages/user_profile/user_profile"
									})
								}, 2000)
							}
						}
					}
				} else if (item.status_text_value == 7) {
					uni.switchTab({
						url: "/pages/index/index"
					});
				} else if (item.status_text_value == 8) {
					this.$Router.push({
						path: `/bundle/pages/get_coupon_detail/get_coupon_detail?id=${item.ccl_id}`,
					});
				}
			},
			async checkGrabStatusFun(id) {
				let that = this;
				let resStatus = await checkGrabStatus(id);
				clearTimeout(that.checkStatusTimer)
				that.checkStatusCount++;
				if (resStatus.code != 1 && that.checkStatusCount < 5) {
					if (resStatus.data.status == "pending") {
						this.$toast({
							title: resStatus.msg
						});
						that.checkStatusTimer = setTimeout(() => {
							that.checkGrabStatusFun(id);
						}, 1000)
					} else if (resStatus.data.status == "fail") {
						this.$toast({
							title: resStatus.msg
						});
						that.checkStatusTimer = null;
						this.ifAct = true;
						this.$emit("refresh");
					}
				} else {
					this.$toast({
						title: resStatus.msg
					});
					that.checkStatusTimer = null;
					this.ifAct = true;
					this.$emit("refresh");
				}
			},
			onShowTips(index) {
				const {
					showTips
				} = this;

				this.showTips[index] = showTips[index] ? 0 : 1;
				// 拷贝数组
				this.showTips = Object.assign([], this.showTips);
			},

			getCouponFun() {
				if (!this.isLogin) return this.$Router.push("/pages/login/login");
				getCoupon(this.id).then((res) => {
					if (res.code == 1) {
						this.$toast({
							title: res.msg,
						});
						// setTimeout(() => {
						//   // this.$emit("refresh");
						// }, 1000);
					}
				});
			},
			goUrl(url) {
				this.$Router.push({
					path: url
				})
			}
		},
	};
</script>
<style lang="scss">
	.coupon-item {
		position: relative;
		display: flex;
		height: 164rpx;
		margin-top: 10rpx;
		background-image: url(../../bundle/static/coupon_list_bg.png);
		background-size: 100% 100%;

		&.gray {
			background-image: url(../../bundle/static/coupon_list_bg_gray.png);
			color: #9e9e9e !important;

			.btn {
				width: 117rpx;
				height: 53rpx;

				&.plain {
					color: #cccccc;
				}
			}
		}

		.price {
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: space-evenly;
			width: 154rpx;
		}

		.btn {
			position: absolute;
			line-height: 52rpx;
			width: 120rpx;
			height: 52rpx;
			right: 20rpx;
			bottom: 52rpx;
			text-align: center;
			padding: 0;
			border-radius: 52rpx;
			font-size: 26rpx;

			&.plain {
				background-color: transparent;
				color: $-color-primary;
				border: 1px solid currentColor;
			}
		}

		.expired {
			position: absolute;
			width: 144rpx;
			height: 108rpx;
			top: 28rpx;
			right: 20rpx;
		}

		.receive {
			position: absolute;
			right: 30rpx;
			top: 0rpx;
			width: 99rpx;
			height: 77rpx;
		}
	}

	.icon {
		transition: all 0.4s;
	}

	.rotate {
		transform: rotateZ(-180deg);
	}

	.received {
		position: absolute;
		top: 0;
		right: 50rpx;
		width: 70rpx;
		height: 50rpx;
	}
</style>